<template>
  <n-modal v-model:show="showModal" preset="card" style="width: 800px; max-width: 90vw">
    <div class="model-container">
      <div class="model-content">
        <div class="model-title-box">
          <div class="icon-title-legend"></div>
          <div class="title-text">出入库记录</div>
          <div class="close-box" @click="showModal = false"></div>
        </div>
        <div class="content-box">
          <n-data-table
            v-if="records.length"
            remote
            :paginate-single-page="false"
            class="fortify-table"
            :columns="columns"
            :row-class-name="getRowClassName"
            :pagination="pagination"
            :data="records"
            :row-key="(row) => row.storageAccountId"
          />
          <div v-else class="not-data-box"></div>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getAccessRecordList } from '@/api/home/cabinetStorage';

  // 定义响应式数据
  const showModal = ref(false);
  const cabinetData = ref<any>({});
  const records = ref<any[]>([]);

  // 分页配置
  const pagination = ref({
    cabinetId: undefined as string | undefined,
    orgId: undefined as string | undefined,
    currentPage: 1,
    page: 1,
    pageSize: 10,
    itemCount: 0,
    prefix: () => `共 ${pagination.value.itemCount} 条`,
    onChange: (page: number) => {
      pagination.value.page = page;
      pagination.value.currentPage = page;
      loadAccessRecords();
    },
    onPageSizeChange: (pageSize: number) => {
      pagination.value.pageSize = pageSize;
      pagination.value.page = 1;
      pagination.value.currentPage = 1;
      loadAccessRecords();
    },
  });

  // 表格列配置
  const columns = [
    {
      title: '序号',
      key: 'id',
      width: 20,
      align: 'center',
      render(row: any, index: number) {
        return `${index + 1}`;
      },
    },
    {
      title: '铁鞋编码',
      key: 'shoeCode',
      width: 60,
      align: 'center',
      ellipsis: true,
    },
    {
      title: '出入库',
      key: 'accountCategoryName',
      width: 60,
      align: 'center',
    },
    {
      title: '存放位',
      key: 'storageCode',
      width: 60,
      align: 'center',
    },
    {
      title: '时间',
      key: 'accountTime',
      width: 80,
      align: 'center',
    },
  ];

  // 显示模态框
  async function show(data: any) {
    showModal.value = true;
    cabinetData.value = data;
    pagination.value.page = 1;
    pagination.value.currentPage = 1;
    await loadAccessRecords();
  }

  // 加载出入库记录
  async function loadAccessRecords() {
    try {
      pagination.value.cabinetId = cabinetData.value.cabinetId;
      pagination.value.orgId = cabinetData.value.orgId;

      const res = await getAccessRecordList({
        cabinetId: pagination.value.cabinetId,
        orgId: pagination.value.orgId,
        currentPage: pagination.value.currentPage,
        pageSize: pagination.value.pageSize,
      });

      records.value = res.records;
      pagination.value.pageCount = res.pages;
      pagination.value.itemCount = res.total;
    } catch (error) {
      console.error('加载出入库记录失败:', error);
    }
  }

  // 设置行样式
  function getRowClassName(row: any, index: number) {
    return index % 2 === 0 ? '' : 'row-arrows';
  }

  // 暴露方法给父组件
  defineExpose({
    show,
  });
</script>

<style scoped>
  .model-container {
    width: 100%;
  }

  .model-content {
    width: 100%;
  }

  .model-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
  }

  .icon-title-legend {
    width: 0.25rem;
    height: 1.25rem;
    background: #3b82f6;
    border-radius: 1px;
  }

  .title-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
    flex: 1;
    margin-left: 0.5rem;
  }

  .close-box {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
  }

  .content-box {
    width: 100%;
  }

  .not-data-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #6499d1;
    text-align: center;
    padding: 2rem 0;
  }

  .not-data-box:before {
    content: '';
    width: 6.875rem;
    height: 6.875rem;
    background-image: url(@/assets/not-data.png);
    background-size: 100% 100%;
  }

  .not-data-box:after {
    content: '暂无数据';
  }

  .fortify-table {
    height: 100%;
  }

  :deep(.n-data-table .n-data-table-empty) {
    padding: 0;
  }

  :deep(.n-data-table .n-data-table-th) {
    background: rgb(0 111 214 / 30%);
    font-size: 0.88rem;
    color: #78c1ff;
  }

  :deep(.n-data-table .n-data-table-table),
  :deep(.n-data-table .n-data-table-thead) {
    background: transparent;
  }

  :deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper) {
    border: 0;
    border-top: 1px solid #1b7ab1;
  }

  :deep(.n-data-table .n-data-table-th) {
    border: 0;
  }

  :deep(.n-data-table .n-data-table-td) {
    background-color: transparent;
    border-bottom: 0;
    color: #fff;
  }

  :deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover) {
    background-color: transparent;
  }

  :deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
    background-color: transparent;
  }

  :deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper) {
    overflow-y: auto;
  }

  :deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar) {
    width: 4px;
    height: 4px;
  }

  :deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    background: rgb(255 255 255 / 40%);
  }

  :deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper::-webkit-scrollbar-track) {
    box-shadow: inset 0 0 5px #0003;
    border-radius: 0;
    background: rgb(80 80 80 / 50%);
  }

  .row-arrows {
    background: linear-gradient(90deg, rgba(75, 186, 255, 0.2) 0%, rgba(75, 186, 255, 0) 100%);
    border-bottom: 1px solid #ffffff;
  }
</style>
